<template>
  <div class="select">
    <div class="select-header">{{ $t('common.selectView.selectHeaderText') }}</div>
    <div class="select-body">
      <!-- 搜索框 -->
      <t-input class="model-search" v-model="state.search" :placeholder="$t('common.input.searchAvatarNamePlaceholder')"
        @change="action.searchList">
        <template #prefix-icon>
          <SearchIcon />
        </template>
      </t-input>
      <!-- 模型源选择器 - 分段控制样式 -->
      <div class="model-source-selector">
        <div
          class="selector-option"
          :class="{ active: state.modelSource === 'local' }"
          @click="action.selectModelSource('local')"
        >
          {{ $t('common.modelSource.local', '本地模型') }}
        </div>
        <div
          class="selector-option"
          :class="{ active: state.modelSource === 'common' }"
          @click="action.selectModelSource('common')"
        >
          {{ $t('common.modelSource.common', '公共库模型') }}
        </div>
      </div>

      <div class="model-scroll noscrollbar">
        <!-- 创建模特 -->
        <div class="model-create">
          <t-image class="image" :src="ModelPng" />
          <t-button theme="default" class="btn" @click="action.onCreateModel">{{
            $t('common.selectView.generateButtonText')
          }}</t-button>
        </div>
        <!-- 模特列表 -->
        <div class="model-list">
          <div class="model-list__item" v-for="model in data.modelList" :model-id="model.id" :key="model.id"
            @click="action.selectModel(model)" :class="{ '--active': data.model?.id === model.id }">
            <video v-if="model.isCommonModel" class="video" :src="generateVideo(model.video_path)"/>
            <video v-else class="video" :src="model.video_path" />
            <div class="name" :title="model.name">{{ model.name }}</div>
          </div>
        </div>
        <!-- 分页控件 -->
        <div class="pagination-container">
          <t-pagination
            v-model="state.pagination.current"
            :total="state.pagination.total"
            :page-size="state.pagination.pageSize"
            :page-size-options="[12, 24, 48]"
            :max-page-btn="3"
            show-page-size-options
            show-first-and-last-page-btn="true"
            show-previous-and-next-btn="true"
            @change="action.onPageChange"
            @page-size-change="action.onPageSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import ModelPng from '@renderer/assets/images/video-edit/create-model.png'
import { SearchIcon } from 'tdesign-icons-vue-next'
import { createModel } from '@renderer/components/model-create'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { getIP } from '@renderer/api'

const base_url = ref('')

onMounted(async () => {
  await loadAssetPaths();
})

const router = useRouter()

const data = defineModel({})

// 接收modelSource作为props
const props = defineProps({
  modelSource: {
    type: String,
    default: 'local'
  }
})

const state = reactive({
  search: '',
  // 新增分页状态
  pagination: {
    current: 1,
    total: 0,
    pageSize: 12
  }
})

const emits = defineEmits(['query', 'switchSource'])

// 加载资源路径列表
const loadAssetPaths = async () => {
  try {
    const result = await getIP();
    base_url.value = result.base_url;
  } catch (error) {
    console.error('加载资源路径失败:', error);
    await MessagePlugin.error('加载资源路径失败: ' + (error.message || '未知错误'));
  } finally {
  }
};

// 修复 generateVideo 函数，移除 async
const generateVideo = (video_path) => {
  if (!video_path || !base_url.value) return '';
  return `${base_url.value}:9001/face2face/temp/` + video_path;
};


const action = {
  async searchList() {
    emits('query', {
      name: state.search,
      page: state.pagination.current,
      pageSize: state.pagination.pageSize
    })
  },
  selectModel(model) {
    data.value.model = model
  },
  async onCreateModel() {
    const { isSubmitOK_toSee, isSubmitOK } = await createModel()
    if (isSubmitOK_toSee) {
      router.push('/home?type=model')
    } else if (isSubmitOK) {
      await action.searchList()
    }
  },
// 新增方法 - 选择模型源
  selectModelSource(source) {
    // 重置分页状态
    state.pagination.current = 1
    // 通知父组件切换模型源
    emits('switchSource', source)
    // 重新加载数据
    action.searchList()
  },
  // 新增 - 页码变化处理
  onPageChange(pageInfo) {
    state.pagination.current = pageInfo.current
    action.searchList()
  },
  // 新增 - 每页条数变化处理
  onPageSizeChange(pageSize) {
    state.pagination.pageSize = pageSize
    state.pagination.current = 1
    action.searchList()
  },
  // 新增 - 更新总条数
  updateTotal(total) {
    state.pagination.total = total
  }
}

// 暴露 updateTotal 方法，让父组件能够更新总条数
defineExpose({
  updateTotal: action.updateTotal
})

</script>

<style lang="less" scoped>
.select {
  width: 415px;
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #ffffff;  // 添加白色背景

  &-header {
    font-weight: 500;
    padding: 18px;
    font-size: 14px;
    color: #333333;  // 白色文字改为深灰色
    line-height: 22px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色
    background-color: #fafafa;  // 添加浅灰白色背景，区分头部
  }

  &-body {
    flex: 1;
    padding: 16px 19px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #ffffff;  // 确保主体区域为白色
  }

  .model {
    &-search {
      flex: none;
      margin-bottom: 21px;
      --td-bg-color-specialcomponent: #ffffff;  // 深色背景改为白色
      --td-text-color-primary: #333333;  // 白色文字改为深灰色
      --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

      :deep(.t-input) {
        border-color: #e0e0e0;  // 半透明白色边框改为浅灰色

        &:hover, &:focus {
          border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
        }
      }

      :deep(.t-input--focused) {
        box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加轻微的蓝色聚焦阴影
      }
    }

    &-scroll {
      flex: 1;
      overflow: auto;
    }

    &-create {
      background: #f5f5f5;  // 深色背景改为浅灰色
      border-radius: 4px;
      border: 1px solid #e0e0e0;  // 深色边框改为浅灰色
      width: 100%;
      height: 238px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      transition: all 0.2s ease;  // 添加过渡效果

      &:hover {
        background: #f0f0f0;  // 添加悬停效果
        border-color: #d0d0d0;
      }

      --td-bg-color-secondarycontainer: transparent;

      .image {
        width: 148px;
        height: 92px;
      }

      .btn {
        background: #0052d9;  // 深色背景改为品牌蓝色
        font-size: 12px;
        color: #ffffff;  // 保持按钮文字为白色，确保对比度
        border: none;

        &:hover {
          background: rgba(0, 82, 217, 0.9);  // 添加悬停效果
        }
      }
    }

    &-list__item {
      width: auto;
      height: 238px;
      background: #f9f9f9;  // 深色背景改为浅灰白色
      border-radius: 4px;
      border: 1px solid #e0e0e0;  // 深色边框改为浅灰色
      margin-top: 21px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.2s ease;  // 添加过渡效果
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感

      &:hover {
        background: #f5f5f5;  // 添加悬停效果
        border-color: #d0d0d0;
      }

      &.--active {
        border: 1px solid var(--td-brand-color);
        background-color: rgba(0, 82, 217, 0.05);  // 选中状态添加淡蓝色背景
      }

      &:last-of-type {
        margin-bottom: 21px;
      }

      .name {
        width: 90%;
        font-size: 14px;
        color: #333333;  // 白色文字改为深灰色
        line-height: 22px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .video {
        max-width: 100%;
        max-height: 80%;
        border-radius: 4px;
        background-color: #000;  // 添加黑色背景，确保视频内容可见性
      }
    }
  }
}

/* 模型源选择器 */
.model-source-selector {
  display: flex;
  margin: 10px 0 15px;
  background-color: #f5f5f5;  // 深色背景改为浅灰色
  border-radius: 4px;
  padding: 4px;

  .selector-option {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);  // 半透明白色改为半透明黑色
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;

    &:hover {
      color: rgba(0, 0, 0, 0.9);  // 半透明白色改为更深的半透明黑色
    }

    &.active {
      background-color: #ffffff;  // 深色背景改为白色
      color: #0052d9;  // 白色文字改为品牌蓝色
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  // 减轻阴影
    }
  }
}


/* 分页控件样式 */
.pagination-container {
  margin: 16px 0;

  :deep(.t-pagination) {
    --td-text-color-primary: #333333;  // 黑色文字改为深灰色
    --td-text-color-anti: #333333;  // 黑色文字改为深灰色
    --td-text-color-secondary: rgba(0, 0, 0, 0.6);  // 半透明白色改为半透明黑色
    --td-bg-color-container: #ffffff;  // 深色背景改为白色
    --td-bg-color-component: #f5f5f5;  // 深色组件背景改为浅灰色
    --td-brand-color: var(--td-brand-color);  // 保持品牌色不变
    display: block;

    .t-pagination__total,
    .t-pagination__select {
      color: rgba(0, 0, 0, 0.6);  // 半透明白色改为半透明黑色
    }

    .t-pagination__btn {
      background-color: #ffffff;  // 深色背景改为白色
      border-color: #e0e0e0;  // 深色边框改为浅灰色

      &:hover:not(:disabled) {
        background-color: #f5f5f5;  // 深色悬停背景改为浅灰色
      }

      &.t-is-disabled {
        color: rgba(0, 0, 0, 0.3);  // 半透明白色改为半透明黑色
        background-color: #f0f0f0;  // 深色背景改为更浅的灰色
      }

      &.t-is-current {
        background-color: var(--td-brand-color);
        color: #ffffff;  // 保持当前页按钮的白色文字
      }
    }
  }
}
</style>
